import React, { useCallback, useState, useEffect } from "react";
import request from "../utils/request";
import { withLogin } from "../utils/hoc";
import {
  Layout,
  Menu,
  Breadcrumb,
  Row,
  Col,
  Avatar,
  Image,
  Dropdown,
  Form,
  Input,
  Button,
  Radio,
  Drawer,
  message,
} from "antd";
import {
  DingtalkOutlined,
  DownOutlined,
  SoundOutlined,
  TeamOutlined,
  UsergroupAddOutlined,
  BankOutlined,
  BellOutlined,
  SolutionOutlined,
  DotChartOutlined,
  ReadOutlined,
  FireOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import "../css/manage.scss";
import Rules from "./Rules/Default";
import Home from "./Manages/Home";
import Student from "./Student/Default";
import Notice from "./Notice/Default";
import Organization from "./Organization/Default";
import { Switch, Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function Manage(props) {
  const [visible, setVisible] = useState(false);
  const [breadcrumb, setBreadcrumb] = useState();
  const [breadcrumbRoutes, setBreadcrumbRoutes] = useState();
  const [form] = Form.useForm();
  // 路由信息
  const routers = [
    {
      path: "/home",
      text: "系统首页",
      icon: <HomeOutlined />,
    },
    {
      path: "/notice",
      text: "公告管理",
      icon: <SoundOutlined />,
      children: [
        {
          path: "/list",
          text: "公告列表",
        },
      ],
    },
    {
      path: "/student",
      text: "成员管理",
      icon: <TeamOutlined />,
      children: [
        {
          path: "/list",
          text: "成员列表",
          icon: <UsergroupAddOutlined />,
        },
      ],
    },
    {
      path: "/org",
      text: "社团管理",
      icon: <BankOutlined />,
      children: [
        {
          path: "/list",
          text: "社团列表",
          icon: <SolutionOutlined />,
        },
        {
          path: "/activity",
          text: "社团活动",
          icon: <DotChartOutlined />,
        },
        {
          path: "/news",
          text: "社团新闻",
          icon: <FireOutlined />,
        },
      ],
    },
    {
      path: "/rules",
      text: "社团规章制度",
      icon: <ReadOutlined />,
      children: [
        {
          path: "/list",
          text: "社团规则",
        },
      ],
    },
  ];
  const pathName = {
    "/manage": "首页",
    "/home": "系统首页",
    "/notice": "公告管理",
    "/student": "成员管理",
    "/org": "社团管理",
    "/rules": "社团规章制度",
    "/list": "列表详细",
    "/activity": "社团活动",
    "/news": "社团新闻",
  };
  const initBreadCrumb = useCallback((location = props.location) => {
    const paths = location.pathname.split(/\b(?=\/)/);
    const breadcrumbRoutes = paths.map((item) => {
      return {
        path: item,
        breadcrumbName: pathName[item],
      };
    });
    setBreadcrumb(paths);
    setBreadcrumbRoutes(breadcrumbRoutes);
  }, []);
  const changeMenu = ({ key }) => {
    console.log("key", key);
    props.history.push({
      pathname: key,
    });
  };
  useEffect(() => {
    initBreadCrumb();
    props.history.listen(initBreadCrumb);
  }, []);
  // 更改密码
  const changepawd = useCallback(() => {
    setVisible(true);
  }, []);
  // 确认更改密码
  const onFinish = useCallback((val) => {
    const { _id } = props.userinfo;
    request.put("users/editpwd/" + _id, val).then(({ data }) => {
      if (data.code === 1) {
        message.success("修改成功，请重新登录");
        props.history.push("/login");
      } else {
        message.error("修改失败");
        return;
      }
    });
  }, []);
  // 退出登录
  const logout = useCallback(() => {
    props.logout();
    props.history.push("/login");
  });
  const menu = (
    <Menu>
      <Menu.ItemGroup>
        <Menu.Item onClick={logout} key="0">
          切换账号
        </Menu.Item>
        <Menu.Item key="1" onClick={changepawd}>
          修改密码
        </Menu.Item>
        <Menu.Item onClick={logout} key="2">
          退出登录
        </Menu.Item>
      </Menu.ItemGroup>
    </Menu>
  );
  const baseURL = props.match.path;
  return (
    <Layout style={{ width: "100%", height: "100%" }}>
      {/* 头部区域 */}
      <Header
        className="header"
        style={{ height: 70, backgroundColor: "#242f42" }}
      >
        <Row className="header_row">
          <Col className="col1" span={18}>
            <DingtalkOutlined style={{ color: "#fff", fontSize: "40px" }} />
            <h1>社团管理系统</h1>
          </Col>
          <Col className="col2" span={6}>
            <div>
              {" "}
              <BellOutlined />{" "}
            </div>
            <div>
              <Avatar
                src={
                  <Image
                    src="https://lin-xin.gitee.io/example/work/static/img/img.146655c9.jpg"
                    style={{ width: 32 }}
                  />
                }
              />
            </div>
            <div>
              <Dropdown placement="bottomRight" trigger="click" overlay={menu}>
                <a
                  style={{ color: "#fff", fontSize: 18 }}
                  className="ant-dropdown-link"
                  onClick={(e) => e.preventDefault()}
                >
                  {props.userinfo.username} <DownOutlined />
                </a>
              </Dropdown>
            </div>
          </Col>
        </Row>
      </Header>
      <Layout>
        {/* 侧边导航栏 */}
        <Sider width={250} className="site-layout-background">
          <Menu
            onClick={changeMenu}
            mode="inline"
            style={{ height: "100%", borderRight: 0 }}
          >
            {routers.map((item) => {
              if (item.children) {
                return (
                  <SubMenu
                    key={baseURL + item.path}
                    icon={item.icon}
                    title={item.text}
                  >
                    {item.children.map((it) => {
                      return (
                        <Menu.Item
                          icon={it.icon}
                          style={{ width: 249 }}
                          key={baseURL + item.path + it.path}
                        >
                          {it.text}
                        </Menu.Item>
                      );
                    })}
                  </SubMenu>
                );
              } else {
                return (
                  <Menu.Item
                    icon={item.icon}
                    style={{ width: 249 }}
                    key={baseURL + item.path}
                  >
                    {item.text}
                  </Menu.Item>
                );
              }
            })}
          </Menu>
        </Sider>
        {/* 内容主体区域 */}
        <Layout style={{ padding: "0 24px 24px" }}>
          {/* 面包屑导航 */}
          <Breadcrumb
            style={{ padding: 10 }}
            routes={breadcrumbRoutes}
          ></Breadcrumb>
          <Content
            style={{
              backgroundColor: "#fff",
              padding: 20,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path={baseURL + "/home"} component={Home} />
              <Route path={baseURL + "/notice"} component={Notice} />
              <Route path={baseURL + "/student"} component={Student} />
              <Route path={baseURL + "/org"} component={Organization} />
              <Route path={baseURL + "/rules"} component={Rules} />
              <Redirect from={baseURL} to={baseURL + "/home"} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
      {/* 更改密码弹出框 */}
      <Drawer
        title="修改密码"
        placement="right"
        onClose={() => {
          setVisible(false);
        }}
        visible={visible}
      >
        <Form form={form} onFinish={onFinish}>
          <Form.Item label="旧密码" name="password">
            <Input.Password />
          </Form.Item>
          <Form.Item label="新密码" name="newpassword">
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              确认修改
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </Layout>
  );
}
Manage = connect(
  (state) => {
    return {
      userinfo: state.userinfo.userinfo,
    };
  },
  (dispatch) => {
    return {
      logout() {
        dispatch({ type: "logout" });
      },
    };
  }
)(Manage);
Manage = withLogin(Manage);
export default Manage;
